// 类组件
// import React,{Component} from 'react';

// 函数组件
import {React,useEffect,useRef} from 'react';

import styles from './uc-swiper.module.css';
import propTypes from 'prop-types';
import {withRouter} from 'react-router-dom';
import $ from 'jquery';
import Swipe from './js/swipe';

/*
*  坑: 公司内部库，下不到|下的到，老旧，必须要用
*
*  autoplay: 自动播放   false
*  autoplayInterval: 间隔时间
*
*  data: [{_id,title,sub_title,banner,url},{},...]
*
* */

// 类组件
// class UcSwiper extends Component{

//   static defaultProps = {
//     autoplay:  false,
//     autoplayInterval: 1000
//   };
//   static propTypes = {
//     autoplay:  propTypes.bool,
//     autoplayInterval: propTypes.number,
//     data: propTypes.arrayOf(propTypes.shape({
//       _id: propTypes.string.isRequired,
//       title: propTypes.string,
//       sub_title: propTypes.string,
//       banner: propTypes.string.isRequired,
//       url:propTypes.string
//     })),
//   };

//   componentDidMount(){
//     // console.log(this.swiper);
//     this.init();
//   }

//   componentDidUpdate(){
//     this.init();
//   }

//   init = () => {
//     new Swipe(this.swiper,{
//       auto: this.props.autoplay ? this.props.autoplayInterval : 0,
//       continuous:true,
//       stopPropation:true,
//       callback:function (index,element){
//         $('.banner ol li').removeClass('active');
//         $('.banner ol li').eq(index).addClass('active');
//       }
//     })
//   };


//   render(){

//     let {data,children} = this.props;

//     return (
//       <div className={styles.banner} ref={el=>this.swiper=el}>
//         {
//           data ? (
//             <ul>
//               {
//                 data.map(item=>(
//                   <li key={item._id} onClick={()=>item.url && this.props.history.push(item.url)}>
//                     <img src={item.banner} alt=""/>
//                     <div className={styles["text-box"]}>
//                       <h2>{item.title}</h2>
//                       <p>{item.sub_title}</p>
//                     </div>
//                   </li>
//                 ))
//               }

//             </ul>
//           ) : (
//             <div>{children}</div>
//           )
//         }
//       </div>
//     )
//   }
// }

// export default withRouter(UcSwiper)

// 函数组件
const UcSwiper = props => {
  // 返回一个可变的ref对象swiper
  let swiper = useRef(null)
  
  // 初始方法
  const init = () => {
    new Swipe(swiper,{
      auto: props.autoplay ? props.autoplayInterval : 0,
      continuous:true,
      stopPropation:true,
      callback:function (index,element){
        $('.banner ol li').removeClass('active');
        $('.banner ol li').eq(index).addClass('active');
      }
    })
  };

  useEffect(()=>{
    init();
  })

  let {data,children} = props;

  return (
    <div className={styles.banner} ref={el=>swiper=el}>
      {
        data ? (
          <ul>
            {
              data.map(item=>(
                <li key={item._id} onClick={()=>item.url && props.history.push(item.url)}>
                  <img src={item.banner} alt=""/>
                  <div className={styles["text-box"]}>
                    <h2>{item.title}</h2>
                    <p>{item.sub_title}</p>
                  </div>
                </li>
              ))
            }

          </ul>
        ) : (
          <div>{children}</div>
        )
      }
    </div>
  )

}

UcSwiper.defaultProps = {
  autoplay:  false,
  autoplayInterval: 1000
};

UcSwiper.UcSwiperpropTypes = {
  autoplay:  propTypes.bool,
  autoplayInterval: propTypes.number,
  data: propTypes.arrayOf(propTypes.shape({
    _id: propTypes.string.isRequired,
    title: propTypes.string,
    sub_title: propTypes.string,
    banner: propTypes.string.isRequired,
    url:propTypes.string
  })),
};

export default withRouter(UcSwiper);